<template>
  <div class="home">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div class="page-header">
            <h1>书籍管理系统 <small>demo</small></h1>
          </div>
          <div class="row">	
            <form class="form-search">
              <div class="col-xs-2">
                <input class="form-control" type="text" placeholder="请输入书籍名称" v-model="books.name"/>
              </div>
              <div class="col-xs-1">
                <button type="submit" class="btn btn-info" role="button" @click="getBooks()">查找书籍</button>
              </div>
            </form>
          </div>
          <br>
          <table class="table table-striped">
            <thead>
              <tr class="info">
                <th class="text-center">书籍编号</th>
                <th class="text-center">书籍名称</th>
                <th class="text-center">书籍售价</th>
                <th class="text-center">相关操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in books" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                  <button class="btn btn-danger btn-xs" href="#" role="button" type="button" @click="deleteBook(item.id)">下架书籍</button>&nbsp;&nbsp;
                  <button class="btn btn-warning btn-xs" href="#" role="button" type="button" @click="modifyBook(item.id)">更新信息</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="row">
            <div class="col-md-3 col-md-offset-9">
              <button class="btn btn-primary" role="button" type="button" @click="addBook">添加书籍</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //用于存储book数据
      books: {
        id: 0,
        name: '',
        price: 0
      },
      //操作响应状态码, 1为失败操作，0为成功操作
      status: 1,
    }
  },
  created () {
    this.getBooks()
  },
  methods: {
    //获取所有books数据或者搜索book获取的数据
    async getBooks () {
      //判断是否进行搜索book，如果不是，直接返回所有books数据
      if(this.books.name==null||this.books.name==''){
        const { data: res } = await this.$http.get(`books`)
        this.books = res.data 
      }else{
        //如果是进行搜索book，判断状态码（即判断是否有该书籍）
        const { data: res } = await this.$http.get(`books/${this.books.name}`)
        this.status = res.code
        //判断状态码，为0，表示存在该书籍，返回book数据
        if(this.status==0){
          this.books = res.data
        }else{
          //如果不为0，返回提示信息，并重新请求返回所有books数据
          alert(res.msg)
          const { data: res2 } = await this.$http.get(`books`)
          this.books = res2.data 
        }
      }
    },
    //跳转到添加表单
    addBook(){
      this.$router.push('/add')
    },
    //删除书籍
    async deleteBook(bookId){
      const { data: res } = await this.$http.delete(`book/${bookId}`)
      this.status = res.code
      if(this.status==0){
        alert("下架书籍成功！")
        this.getBooks()
      }else alert(res.msg+", 下架书籍失败！")
    },
    //跳转到修改表单（与添加表单复用）
    modifyBook(bookId){
      this.$router.push({
        path: '/add',
        query: {
          bookId: bookId
        }
      })
    }
  }
}
</script>
